<template>
  <view class="container">
    <!-- 轮播图 -->
    <view class="swiper-container">
      <image class="swiper-img" src="/static/logo.png" mode="aspectFill" />
    </view>

    <!-- 我的版块 -->
    <view class="section-title">我的版块</view>
    <view class="grid">
      <view class="grid-item" v-for="(item, idx) in gridList" :key="idx">
        <view :class="['icon-block', item.iconClass]"></view>
        <text class="grid-text">{{ item.text }}</text>
        <view v-if="item.badge" class="badge">{{ item.badge }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CommunityPage",
  data() {
    return {
      gridList: [
        { text: '我的关注', iconClass: 'icon-star' },
        { text: '三楼活动', iconClass: 'icon-flag', badge: 1 },
        { text: '实用软件', iconClass: 'icon-cube' },
        { text: '爱国爱党', iconClass: 'icon-flag-cn' },
        { text: '手机美化', iconClass: 'icon-phone' },
        { text: '玩机广场', iconClass: 'icon-square' },
        { text: '玩机教程', iconClass: 'icon-book' },
        { text: '原创技术', iconClass: 'icon-bulb' },
        { text: '技术分享', iconClass: 'icon-wrench' },
        { text: '福利活动', iconClass: 'icon-bag' },
        { text: 'Steam', iconClass: 'icon-steam' },
        { text: '游戏', iconClass: 'icon-game' },
      ],
      tabList: [
        { text: '首页', iconClass: 'tab-home' },
        { text: '社区', iconClass: 'tab-community', active: true, badge: 1 },
        { text: '发现', iconClass: 'tab-discover' },
        { text: '空间', iconClass: 'tab-space' },
      ]
    }
  }
}
</script>

<style lang="less">
.container {
  background: #f5f5f5;
  padding-bottom: 120rpx;
}
.swiper-container {
  margin: 12px 12px 0 12px;
  border-radius: 12px;
  overflow: hidden;
  height: 120px;
  background: #eee;
}
.swiper-img {
  width: 100%;
  height: 120px;
  display: block;
}
.section-title {
  margin: 18px 0 8px 18px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 12px;
  margin: 0 12px;
  padding: 8px 0;
}
.grid-item {
  width: 50%;
  padding: 12px 0;
  text-align: center;
  position: relative;
}
.icon-block {
  width: 38px;
  height: 38px;
  margin: 0 auto 6px auto;
  border-radius: 10px;
  background: #eee;
}
.icon-star { background: linear-gradient(135deg, #19cf8a, #43e97b); }
.icon-flag { background: linear-gradient(135deg, #f9d423, #ff4e50); }
.icon-cube { background: linear-gradient(135deg, #36d1c4, #1e90ff); }
.icon-flag-cn { background: linear-gradient(135deg, #ff4e50, #f9d423); }
.icon-phone { background: linear-gradient(135deg, #a8ff78, #78ffd6); }
.icon-square { background: linear-gradient(135deg, #4e54c8, #8f94fb); }
.icon-book { background: linear-gradient(135deg, #f7971e, #ffd200); }
.icon-bulb { background: linear-gradient(135deg, #f7971e, #ffd200); }
.icon-wrench { background: linear-gradient(135deg, #36d1c4, #1e90ff); }
.icon-bag { background: linear-gradient(135deg, #ff6a00, #ee0979); }
.icon-steam { background: linear-gradient(135deg, #232526, #414345); }
.icon-game { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.grid-text {
  font-size: 14px;
  color: #333;
}
.badge {
  position: absolute;
  top: 8px;
  right: 28px;
  background: #ff4e50;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 0 6px;
}
.tabbar {
}
.tabbar-item {
}
.tabbar-icon {
}
.tab-home {
}
.tab-community {
}
.tab-discover {
}
.tab-space {
}
.tabbar-text {
}
.tabbar-text.active {
}
.tab-badge {
}
</style> 